<template>
    <div class="domain-banner">
        <div class="container">
            <div class="banner-left">
                <el-carousel :interval="3000" type="card" :height="height">
                    <el-carousel-item v-for="item in 6" :key="item">
                        <img src="http://00.imgmini.eastday.com/dcminisite/Covercharacter/cover1559116063779cover.png">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="banner-right">
                <article class="panel-side">
                   <div class="grid-weibo-show shadow-hover">
                        <header id="shead">&nbsp;</header>
                        <div id="user-login" class="contentt">
                            <div class="avatar">
                                <img src="https://pjax.cn/content/uploadfile/201904/thum-f3cc1555311623.jpg?param=80y80">
                                <i title="Finally" class="author-ident"></i>
                                <span class="rank"></span>
                            </div>
                            <h4>Finally</h4>
                            <p class="seta">自古深情留不住，总是套路得人心！</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            height:'0px'
        };
    },created:function(){
        this.beforeMount();
    },methods:{
        beforeMount:function(){
            var screenWidth=$(window).width();
            if(screenWidth<500){
                this.height="150px"
            }else{
                this.height="250px"
            }
        }
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 12px;
    opacity: 0.75;
}
.el-carousel__item img{
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1200px){
    .banner-right{
        display: none;
    }
}
@media screen and (min-width: 1200px){
    .banner-left{
        width: 800px;
        float: left;
    }
    .banner-right{
        width: 360px;
        float: right;
        height: 265px;
        margin-right: 15px;
        background-color: cornsilk;
    }
    .banner-right header{
        background: url(../../static/images/headback.jpg) center center no-repeat;
        height: 100px;
        background-size: cover;
        position: relative;
        overflow: hidden;
    }
    .grid-weibo-show .contentt {
        padding: 20px 20px 5px 20px;
        height: 100%;
    }
    .grid-weibo-show .avatar {
        box-shadow: none;
        width: 90px;
        height: 90px;
        padding: 5px;
        background-color: rgba(255,255,255,.3);
        border-radius: 100%;
        margin: -70px auto 0 auto;
        position: relative;
        z-index: 2;
    }
    .grid-weibo-show .avatar img {
        width: 85px;
        height: 85px;
        border-radius: 100%;
        vertical-align: middle;
    }
    .avatar .author-ident {
        display: inline-block;
        background-image: url(../../static/images/icon.png);
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-shadow: 0 0 4px rgba(0,0,0,.3);
        vertical-align: -2px;
        background-position: -50px -25px;
        position: absolute;
        bottom: 8px;
        right: 10px;
    }
    .grid-weibo-show h4 {
        height: 26px;
        line-height: 26px;
        margin: 10px 0;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }

    .grid-weibo-show .seta {
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .panel-side{
        height: 100%;
    }
}
</style>
